<template>
  <el-dialog v-model="dialogVisible" title="阶梯按时配置" :before-close="onCloseDialog">
    <!-- 按时 -->
    <el-form ref="formRef" label-width="160">
      <el-table
        :data="form.data.list"
        :header-cell-style="{
          background: '#F1F1F1',
          'font-size': '14px',
          'font-weight': 600,
          color: '#333333',
        }"
        :cell-style="{
          'font-size': '14px',
          'font-weight': 400,
          color: '#333333',
        }"
      >
        <el-table-column label="序号" width="60" fixed="left">
          <template #default="scope">
            {{ (scope.$index + 1).toString() }}
          </template>
        </el-table-column>
        <el-table-column label="起始分钟">
          <template #default="scope">
            <el-input-number style="width: 100%;"  v-model="scope.row.startMinute" :controls="false"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="结束分钟">
          <template #default="scope">
            <el-input-number style="width: 100%;" v-model="scope.row.endMinute" :controls="false"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="费用（元）">
          <template #default="scope">
            <el-input-number style="width: 100%;" v-model="scope.row.fee" :controls="false"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="计费单位（分钟）" min-width="120">
          <template #default="scope">
            <el-input-number v-model="scope.row.feeUnit" :controls="false"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="费用概述">
          <template #default="scope">
            <el-input v-model="scope.row.remark"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="60" fixed="right">
          <template #default="scope">
            <el-button
              v-if="scope.$index > 0"
              @click="deletebilling(scope.$index)"
              type="primary"
              size="small"
              link
              style="color: #007aff"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="add">
        <el-button type="primary" class="submit-btn-add" @click="addbilling">
          +添加
        </el-button>
      </div>
      <!-- <el-form-item>
        <div class="footer">
          <div></div>
          <div class="search-btn">
            <el-button class="confirm-btn" @click="submitForm(formRef)">确 认 </el-button>
          </div>
        </div>
      </el-form-item> -->
    </el-form>
    <template #footer >
      <el-button type="primary" @click="submitForm(formRef)">确 认 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, shallowRef } from "vue";
const emits = defineEmits(["operationDone"]);

const formRef = ref("");
const dialogVisible = ref(false);
const form = reactive({
  data: {
    method: 1,
    list: [{}],
  },
});

const init = (list) => {
  dialogVisible.value = true;
  if (list) {
    form.data.list = list;
  }
};

const addbilling = () => {
  form.data.list.push({});
};

const deletebilling = (index) => {
  form.data.list.splice(index, 1);
};

const onCloseDialog = () => {
  dialogVisible.value = false;
  form.data = {
    method: 1,
    list: [{}],
  };
  formRef.value?.clearValidate();
  formRef.value?.resetFields();
};

const submitForm = (formEl) => {
  const result = form.data.list.find((el) => {
    const { startMinute, endMinute, feeUnit, fee } = el;
    if (!startMinute?.toString() || !endMinute?.toString() || !feeUnit?.toString() || !fee?.toString()) {
      return el;
    }
  });
  if (result) {
    ElMessage.error('数据填写不完整，请将数据填写完整！');
    return;
  }
  emits("operationDone", form.data);
  onCloseDialog();
  //   if (!formEl) return;
  //   formEl.validate((valid) => {
  //     if (valid) {
  //     }
  //   });
};
defineExpose({
  init
})
</script>

<style lang="less" scoped>
.add {
  text-align: center;
}
.submit-btn-add {
  color: #007aff;
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 2px;
  margin-left: 13px;
  padding: 5px 9px;
  font-weight: 400;
  font-size: 16px;
  color: #007aff;
}
.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  //   margin-top: 24px;
  .search-btn {
    display: flex;

    .confirm-btn {
      width: 65px;
      height: 32px;
      background: #007aff;
      border-radius: 2px;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
    }
  }
}
</style>
